<template>
	<view class="container">
		
		<!-- 库存趋势图(吨) -->
		<view class="chart-section">
			<view class="chart-header">
				<text class="chart-title">库存趋势图(吨)折线图</text>
				<view class="tab-group">
					<text class="tab-item active">日线</text>
					<text class="tab-item">月线</text>
				</view>
			</view>
			<view class="chart-container">
				<LEchart ref="chartTons" @finished="initTonsChart"></LEchart>
			</view>
		</view>

		<!-- 库存趋势图(库位) -->
		<view class="chart-section">
			<view class="chart-header">
				<text class="chart-title">库存趋势图(库位)面积图</text>
				<view class="tab-group">
					<text class="tab-item active">日线</text>
					<text class="tab-item">月线</text>
				</view>
			</view>
			<view class="chart-container">
				<LEchart ref="chartLocations" @finished="initLocationsChart"></LEchart>
			</view>
		</view>

		<!-- 库存占比 -->
		<view class="chart-section">
			<view class="chart-header">
				<text class="chart-title">库存占比</text>
				<text class="view-details">查看详情 ></text>
			</view>
			<view class="tab-group">
				<text class="tab-item active">客户</text>
				<text class="tab-item">大类</text>
			</view>
			<view class="chart-container">
				<LEchart ref="chartProportion" @finished="initProportionChart"></LEchart>
			</view>
		</view>

		<!-- 盈利趋势图 -->
		<view class="chart-section">
			<view class="chart-header">
				<text class="chart-title">盈利趋势图折线图</text>
				<view class="tab-group">
					<text class="tab-item">日线</text>
					<text class="tab-item">月线</text>
					<text class="tab-item active">vConsole</text>
				</view>
			</view>
			<view class="chart-container">
				<LEchart ref="chartProfit" @finished="initProfitChart"></LEchart>
			</view>
		</view>

		<!-- 柱状图 -->
		<view class="chart-section">
			<view class="chart-header">
				<text class="chart-title">周数据统计柱状图</text>
				<view class="tab-group">
					<text class="tab-item active">本周</text>
					<text class="tab-item">上周</text>
				</view>
			</view>
			<view class="chart-container">
				<LEchart ref="chartRiver" @finished="initRiverChart"></LEchart>
			</view>
		</view>
		
		
	</view>
</template>

<script setup>
import { ref } from 'vue'
import LEchart from "@/components/l-echart/l-echart.vue"
import * as echarts from "echarts"

// 定义图表引用
const chartTons = ref(null)
const chartLocations = ref(null)
const chartProportion = ref(null)
const chartProfit = ref(null)
const chartRiver = ref(null) // 新增河流图引用

// 库存趋势图(吨)配置
const tonsOption = ref({
	grid: {
		left: '3%',
		right: '4%',
		bottom: '15%',
		top: '15%',
		containLabel: true
	},
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'cross',
			label: {
				backgroundColor: '#667eea'
			}
		},
		backgroundColor: 'rgba(255, 255, 255, 0.95)',
		borderColor: '#e2e8f0',
		textStyle: {
			color: '#2d3748'
		}
	},
	xAxis: {
		type: 'category',
		boundaryGap: false,
		data: ['2022-02-15', '2022-06-20', '2022-08-14', '2022-11-12', '2023-02-1'],
		axisLine: {
			lineStyle: {
				color: '#e2e8f0'
			}
		},
		axisLabel: {
			color: '#4a5568',
			fontSize: 12
		}
	},
	yAxis: {
		type: 'value',
		name: '库存趋势(吨)',
		nameTextStyle: {
			color: '#4a5568',
			fontSize: 12
		},
		axisLine: {
			lineStyle: {
				color: '#e2e8f0'
			}
		},
		axisLabel: {
			color: '#4a5568',
			fontSize: 12
		},
		splitLine: {
			lineStyle: {
				type: 'dashed',
				color: '#e2e8f0'
			}
		}
	},
	series: [{
		name: '库存',
		type: 'line',
		smooth: true,
		symbol: 'circle',
		symbolSize: 8,
		data: [30000, 8000, 65000, 35000, 35000],
		lineStyle: {
			color: '#667eea',
			width: 3
		},
		itemStyle: {
			color: '#667eea',
			borderColor: '#ffffff',
			borderWidth: 2
		},
		areaStyle: {
			color: {
				type: 'linear',
				x: 0,
				y: 0,
				x2: 0,
				y2: 1,
				colorStops: [
					{
						offset: 0,
						color: 'rgba(102, 126, 234, 0.3)'
					},
					{
						offset: 1,
						color: 'rgba(102, 126, 234, 0.05)'
					}
				]
			}
		}
	}]
})

// 库存趋势图(库位)配置
const locationsOption = ref({
	grid: {
		left: '3%',
		right: '4%',
		bottom: '15%',
		top: '15%',
		containLabel: true
	},
	tooltip: {
		trigger: 'axis',
		backgroundColor: 'rgba(255, 255, 255, 0.95)',
		borderColor: '#e2e8f0',
		textStyle: {
			color: '#2d3748'
		}
	},
	xAxis: {
		type: 'category',
		boundaryGap: false,
		data: ['2022-02-15', '2022-06-20', '2022-08-14', '2022-11-12', '2023-02-1'],
		axisLine: {
			lineStyle: {
				color: '#e2e8f0'
			}
		},
		axisLabel: {
			color: '#4a5568',
			fontSize: 12
		}
	},
	yAxis: {
		type: 'value',
		name: '库位',
		min: 4,
		max: 10,
		axisLine: {
			lineStyle: {
				color: '#e2e8f0'
			}
		},
		axisLabel: {
			color: '#4a5568',
			fontSize: 12
		},
		splitLine: {
			lineStyle: {
				type: 'dashed',
				color: '#e2e8f0'
			}
		}
	},
	series: [{
		name: '库位',
		type: 'line',
		smooth: true,
		symbol: 'none',
		data: [4, 6, 8, 7, 9],
		lineStyle: {
			color: '#38b2ac',
			width: 3
		},
		areaStyle: {
			color: {
				type: 'linear',
				x: 0,
				y: 0,
				x2: 0,
				y2: 1,
				colorStops: [
					{
						offset: 0,
						color: 'rgba(56, 178, 172, 0.3)'
					},
					{
						offset: 1,
						color: 'rgba(56, 178, 172, 0.05)'
					}
				]
			}
		}
	}]
})

// 库存占比配置
// 库存占比配置 (扇区间隙饼图)内半径50%，外半径80%
const proportionOption = ref({
	tooltip: {
		trigger: 'item',
		formatter: '{a} <br/>{b}: {c} ({d}%)',
		backgroundColor: 'rgba(255, 255, 255, 0.95)',
		borderColor: '#e2e8f0',
		textStyle: {
			color: '#2d3748'
		}
	},
	legend: {
		orient: 'horizontal',
		bottom: 10,
		left: 'center',
		textStyle: {
			color: '#4a5568',
			fontSize: 12
		}
	},
	series: [{
		name: '库存占比',
		type: 'pie',
		radius: ['35%', '80%'], 
		center: ['50%', '50%'],
		avoidLabelOverlap: false,
		label: {
			show: true,
			position: 'outside',
			formatter: '{b}',
			color: '#2d3748',
			fontSize: 12
		},
		emphasis: {
			label: {
				show: true,
				fontSize: '14',
				fontWeight: 'bold',
				color: '#2d3748'
			}
		},
		labelLine: {
			show: true,
			length: 8,
			length2: 12,
			lineStyle: {
				color: '#a0aec0'
			}
		},
		itemStyle: {
			borderRadius: 8,
			borderColor: '#ffffff',
			borderWidth: 3
		},
		data: [
			{ value: 33, name: 'rose 1', itemStyle: { color: '#667eea' } }, // 优雅蓝紫
			{ value: 17, name: 'rose 2', itemStyle: { color: '#38b2ac' } }, // 清新青绿
			{ value: 28, name: 'rose 3', itemStyle: { color: '#ed8936' } }, // 温暖橙色
			{ value: 22, name: 'rose 4', itemStyle: { color: '#e53e3e' } }  // 经典红色
		]
	}]
})

// 盈利趋势图配置
const profitOption = ref({
	grid: {
		left: '3%',
		right: '4%',
		bottom: '15%',
		top: '15%',
		containLabel: true
	},
	tooltip: {
		trigger: 'axis',
		backgroundColor: 'rgba(255, 255, 255, 0.95)',
		borderColor: '#e2e8f0',
		textStyle: {
			color: '#2d3748'
		}
	},
	xAxis: {
		type: 'category',
		boundaryGap: false,
		data: ['1月', '2月', '3月', '4月', '5月', '6月'],
		axisLine: {
			lineStyle: {
				color: '#e2e8f0'
			}
		},
		axisLabel: {
			color: '#4a5568',
			fontSize: 12
		}
	},
	yAxis: {
		type: 'value',
		name: '盈利',
		axisLine: {
			lineStyle: {
				color: '#e2e8f0'
			}
		},
		axisLabel: {
			color: '#4a5568',
			fontSize: 12
		},
		splitLine: {
			lineStyle: {
				type: 'dashed',
				color: '#e2e8f0'
			}
		}
	},
	series: [{
		name: '盈利',
		type: 'line',
		smooth: true,
		symbol: 'circle',
		symbolSize: 8,
		data: [120, 132, 101, 134, 90, 230],
		lineStyle: {
			color: '#ed8936',
			width: 3
		},
		itemStyle: {
			color: '#ed8936',
			borderColor: '#ffffff',
			borderWidth: 2
		},
		areaStyle: {
			color: {
				type: 'linear',
				x: 0,
				y: 0,
				x2: 0,
				y2: 1,
				colorStops: [
					{
						offset: 0,
						color: 'rgba(237, 137, 54, 0.3)'
					},
					{
						offset: 1,
						color: 'rgba(237, 137, 54, 0.05)'
					}
				]
			}
		}
	}]
})

// 柱状图配置
const riverOption = ref({
	grid: {
		left: '3%',
		right: '4%',
		bottom: '15%',
		top: '15%',
		containLabel: true
	},
	tooltip: {
		trigger: 'axis',
		backgroundColor: 'rgba(255, 255, 255, 0.95)',
		borderColor: '#e2e8f0',
		textStyle: {
			color: '#2d3748'
		}
	},
	xAxis: {
		type: 'category',
		boundaryGap: true,
		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
		axisLine: {
			lineStyle: {
				color: '#e2e8f0'
			}
		},
		axisLabel: {
			color: '#4a5568',
			fontSize: 12
		}
	},
	yAxis: {
		type: 'value',
		name: '吨',
		max: 200,
		axisLine: {
			lineStyle: {
				color: '#e2e8f0'
			}
		},
		axisLabel: {
			color: '#4a5568',
			fontSize: 12
		},
		splitLine: {
			lineStyle: {
				type: 'dashed',
				color: '#e2e8f0'
			}
		}
	},
	series: [
		{
			name: '数据',
			type: 'bar',
			data: [118, 200, 150, 80, 70, 110, 128],
			barWidth: '60%',
			showBackground: true,
			itemStyle: {
				color: '#4299e1',
				borderRadius: [4, 4, 0, 0]
			},
			backgroundStyle: {
				color: 'rgba(180, 180, 180, 0.2)'
			}
		}
	]
})

// 方法定义
const initTonsChart = async () => {
	const chart = await chartTons.value.init(echarts);
	if (chart) {
		chart.setOption(tonsOption.value);
	}
}

const initLocationsChart = async () => {
	const chart = await chartLocations.value.init(echarts);
	if (chart) {
		chart.setOption(locationsOption.value);
	}
}

const initProportionChart = async () => {
	const chart = await chartProportion.value.init(echarts);
	if (chart) {
		chart.setOption(proportionOption.value);
	}
}

const initProfitChart = async () => {
	const chart = await chartProfit.value.init(echarts);
	if (chart) {
		chart.setOption(profitOption.value);
	}
}

const initRiverChart = async () => {
	const chart = await chartRiver.value.init(echarts);
	if (chart) {
		chart.setOption(riverOption.value);
	}
}
</script>

<style>
.container {
	padding: 20rpx;
	background-color: #f7fafc;
	min-height: 100vh;
}

.chart-section {
	margin-bottom: 40rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	border: 1rpx solid #e2e8f0;
}

.chart-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.chart-title {
	color: #2d3748;
	font-size: 32rpx;
	font-weight: 600;
}

.view-details {
	color: #667eea;
	font-size: 28rpx;
}

.tab-group {
	display: flex;
	background-color: #f7fafc;
	border-radius: 10rpx;
	padding: 4rpx;
	border: 1rpx solid #e2e8f0;
}

.tab-item {
	padding: 16rpx 24rpx;
	border-radius: 8rpx;
	font-size: 26rpx;
	color: #4a5568;
	transition: all 0.3s;
}

.tab-item.active {
	background-color: #667eea;
	color: #ffffff;
	font-weight: 600;
	box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
}

.chart-container {
	width: 100%;
	height: 400rpx;
	position: relative;
}
</style>
